<!--
 * @Descripttion: 今日机械化作业概况
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-03 10:35:07
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>

<style>
    .total-map {
        height: calc(100vh - 375px);
        width: 100%;
        position: relative;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="title-row layuimini-title">
            <div class="title-left">
                <h4><span>今日机械化作业概况</span></h4>
            </div>
        </div>


        <div class="section">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs12 layui-col-md3">

                    <div class="layui-card top-panel">
                        <div class="layui-card-header">机械作业计划</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-xs9 layui-col-md9">
                                    <div class="top-panel-content">
                                        <div class="top-panel-subtitle">今日执行计划：</div>
                                        <div class="top-panel-subValue">
                                            <a href="javascript:;"
                                                layuimini-content-href="page/laborOperations/laborJobManager/plan.html">
                                                <span class="is-clcik num">0</span>
                                            </a>
                                            个
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                                    <img src="/assets/images/laborOperations/icon1.png" class="top-panel-icon">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-md3">
                    <div class="layui-card top-panel">
                        <div class="layui-card-header">机械作业任务</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-xs9 layui-col-md9">
                                    <div class="top-panel-content">
                                        <div class="top-panel-subtitle">今日任务总数：</div>
                                        <div class="top-panel-subValue">
                                            <a href="javascript:;"
                                                layuimini-content-href="page/laborOperations/laborJobManager/workOrder.html">
                                                <span class="is-clcik num">0</span>
                                            </a>个
                                        </div>
                                    </div>
                                    <div class="top-panel-content">
                                        <div class="top-panel-subtitle">已完成：</div>
                                        <div class="top-panel-subValue">
                                            <span class="num">0/0</span>个
                                        </div>
                                    </div>
                                    <div class="top-panel-content">
                                        <div class="top-panel-subtitle">处理中：</div>
                                        <div class="top-panel-subValue">
                                            <a href="javascript:;"
                                                layuimini-content-href="page/laborOperations/laborJobManager/workOrder.html">
                                                <span class="is-clcik num">0</span>
                                            </a>
                                            /0个
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                                    <img src="/assets/images/laborOperations/icon2.png" class="top-panel-icon">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-md3">
                    <div class="layui-card top-panel">
                        <div class="layui-card-header">车辆</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-xs9 layui-col-md9">
                                    <div class="top-panel-content">
                                        <div class="top-panel-subtitle">今日执行工单劳动力：</div>
                                        <div class="top-panel-subValue"><span class="is-clcik num">0</span>个 </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                                    <img src="/assets/images/laborOperations/icon3.png" class="top-panel-icon">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="layui-col-xs12 layui-col-md3">

                    <div class="layui-card top-panel">
                        <div class="layui-card-header">待处理</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-xs9 layui-col-md9">
                                    <div class="top-panel-content">
                                        <div class="top-panel-subtitle">即将到期作业计划：</div>
                                        <div class="top-panel-subValue">
                                            <a href="javascript:;"
                                                layuimini-content-href="page/laborOperations/laborJobManager/plan.html">
                                                <span class="is-clcik num">0</span>
                                            </a>
                                            个
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                                    <img src="/assets/images/laborOperations/icon4.png" class="top-panel-icon">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="title-row">
                <div class="title-left">
                    <div class="title-info">
                        <div class="title-line"></div>
                        <span class="title-text">地图信息</span>
                    </div>
                </div>
                <div class="title-right">
                    <span class="title-right-text"></span>
                </div>
            </div>
            <div class="view-map">
                <div class="total-map">
                    <div class="line-info">
                        <div class="line-info__item">
                            <div class="line planLine"></div>
                            <div class="info">计划路线</div>
                        </div>
                        <div class="line-info__item">
                            <div class="line finishLine"></div>
                            <div class="info">已完成路线</div>
                        </div>
                        <div class="line-info__item">
                            <div class="line processLine">
                                <img src="/assets/images/map/process.png" />
                            </div>
                            <div class="info">处理中路线</div>
                        </div>
                    </div>
                    <!-- 地图信息 -->
                    <div id="totalMapContainer" class="amap-container">
                    </div>
                    <!-- 全屏/退出全屏 -->
                    <div class="fullscreen" id="onFullscreen">
                        <i class="fullscreen-icon layui-icon layui-icon-screen-full"></i>
                    </div>


                    <div class="gird-select">
                        <div class="panel-control">
                            <h3 class="panel-title">
                                <img src="assets/images/map/check.png" width="16" />
                                图层
                            </h3>
                            <div class="checkbox-item">
                                <input type="checkbox" id="planLine" checked>
                                <label for="planLine">计划路线</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="finishLine" checked>
                                <label for="finishLine">已完成路线</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="processLine" checked>
                                <label for="processLine">进行中路线</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'miniAMap'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            miniAMap = layui.miniAMap;

        // 初始化地图 
        const map = miniAMap.render({
            containerId: 'totalMapContainer', options: {
                zoom: 14,
                center: [116.397428, 39.90923] // 默认北京中心点
            }
        })

        // 模拟数据
        const mockData = {
            planLines: [
                {
                    path: [[116.43, 39.91], [116.44, 39.91], [116.44, 39.90]],
                    startTime: "08:00", endTime: "12:00"
                }
            ],
            finishedLines: [
                {
                    path: [[116.40, 39.91], [116.405, 39.915], [116.44, 39.91]],
                    actualStart: "08:05", actualEnd: "11:50", status: "finished"
                }
            ],
            processingLines: [
                {
                    path: [[116.425, 39.91], [116.435, 39.905], [116.42, 39.90]],
                    actualStart: "13:00", status: "processing"
                }
            ]
        };

        // 存储路线对象
        const lineObjects = {
            plan: [],
            finished: [],
            processing: []
        };


        // 渲染所有路线
        function renderAllLines() {
            clearAllLines();
            // 1. 渲染计划路线（灰色虚线）
            if (document.getElementById('planLine').checked) {
                mockData.planLines.forEach(item => {
                    const line = miniAMap.createPolyline(item.path, {
                        color: '#8c8c8c',
                        isDashed: true
                    });

                    // 添加起点/终点标记
                    const startMarker = miniAMap.createMarker({
                        position: item.path[0],
                        iconUrl: miniAMap.defaults.startIconUrl,
                        timeText: `计划开始: ${item.startTime}`,
                        offsetX: -10,
                        offsetY: -20
                    }
                    );

                    const endMarker = miniAMap.createMarker({
                        position: item.path[item.path.length - 1],
                        iconUrl: miniAMap.defaults.endIconUrl,
                        timeText: `计划结束: ${item.endTime}`,
                        offsetX: 10,
                        offsetY: -20
                    }
                    );

                    map.add([line, startMarker, endMarker]);
                    lineObjects.plan.push(line, startMarker, endMarker);
                });
            }

            // 2. 渲染已完成路线（蓝色实线）
            if (document.getElementById('finishLine').checked) {
                mockData.finishedLines.forEach(item => {
                    const line = miniAMap.createPolyline(item.path, {
                        color: '#1890ff',
                        isDashed: false,
                        zIndex: 20
                    });

                    const startMarker = miniAMap.createMarker(
                        {
                            position: item.path[0],
                            iconUrl: miniAMap.defaults.actualStartIconUrl,
                            imgWidth: 50,
                            timeText: `实际开始: ${item.actualStart}`,
                            offsetX: -30,
                            offsetY: -50
                        }
                    );

                    const endMarker = miniAMap.createMarker({
                        position: item.path[item.path.length - 1],
                        iconUrl: miniAMap.defaults.actualEndIconUrl,
                        imgWidth: 50,
                        timeText: `实际结束: ${item.actualEnd}`,
                        offsetX: -30,
                        offsetY: -50
                    });

                    map.add([line, startMarker, endMarker]);
                    lineObjects.finished.push(line, startMarker, endMarker);
                });
            }

            // 3. 渲染进行中路线（橙色实线）
            if (document.getElementById('processLine').checked) {
                mockData.processingLines.forEach(item => {
                    const line = miniAMap.createPolyline(item.path, {
                        color: '#ff8642',
                        isDashed: false,
                        zIndex: 30
                    });

                    const startMarker = miniAMap.createMarker({
                        position: item.path[0],
                        iconUrl: miniAMap.defaults.startIconUrl,
                        timeText: `开始: ${item.actualStart}`,
                        offsetX: -10,
                        offsetY: -20
                    });
                    // 进行中路线特殊标记（红旗图标）
                    const endMarker = miniAMap.createMarker({
                        position: item.path[item.path.length - 1],
                        iconUrl: miniAMap.defaults.processIconUrl,
                        offset: new AMap.Pixel(-12, -30),
                        offsetX: -20,
                        offsetY: -20
                    });
                    map.add([line, startMarker, endMarker]);
                    lineObjects.processing.push(line, startMarker, endMarker);
                });
            }
        }

        // 清除所有路线
        function clearAllLines() {
            Object.values(lineObjects).forEach(group => {
                map.remove(group);
                group.length = 0;
            });
        }

        // 绑定复选框事件
        document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
            checkbox.addEventListener('change', renderAllLines);
        });
        // 初始渲染
        renderAllLines();
        $('#onFullscreen').on('click', function () {
            miniAMap.onFullscreen(map)
        });
    })
</script>